<?php echo $this->getContent(); ?>
    <section id="loginPage" class="l-page">

        <div class="l-container l-flexbox l-flexbox_column l-flexbox_flexbetween">
            <form class="l-form l-flexbox l-flexbox_column" action="#">
                <span class="text text_error">Error</span>
                <input id="login-email" class="form-input" type="email" placeholder="Email" required>
                <div class="chroma-hash">
                    <input id="login-password" class="form-input pattern-pass" type="password" placeholder="Password" required>
                </div>
                <label class="form-label" for="login-remember">
                    Remember me
                    <input id="login-remember" class="form-checkbox" type="checkbox">
                </label>
                <a id="forgot" class="text text_login" href="#">Forgot password?</a>

                <button id="loginForm" class="btn btn_form btn_login btn_qb">Log In</button>
                <a id="signupQB" class="text text_welcome" href="#">Create An Account</a>
            </form>
        </div>
    </section>
    <section id="signUpPage" class="l-page is-hidden">
        <div class="l-container l-flexbox l-flexbox_column l-flexbox_flexbetween">
            <form class="l-form l-flexbox l-flexbox_column" action="#" autocomplete="off">
                <span class="text text_error">Error</span>
                <input id="signup-full_name" class="form-input pattern-name" type="text" placeholder="Name" required>
                <input id="signup-email" class="form-input" type="email" placeholder="Email" required>
                <div class="chroma-hash">
                    <input id="signup-password" class="form-input pattern-pass" type="password" placeholder="Password" required>
                </div>
                <div class="form-file">
                    <div class="form-file-custom l-flexbox_inline l-flexbox_flexcenter">
                        <!-- <img class="contact-avatar_signup avatar avatar_signup" src="" alt="user"> -->
                        <div class="contact-avatar_signup avatar avatar_signup"></div>
                        <span class="name name_signup"></span>
                    </div>
                    <input id="signup-avatar" class="form-file-default" type="file" accept="image/*">
                </div>
                <button id="signupForm" class="btn btn_form btn_signup btn_qb">Sign Up</button>
                <a id="loginQB" class="text text_welcome" href="#">Already have an account?</a>

            </form>
        </div>
    </section>


    <section id="forgotPage" class="l-page is-hidden">
        <div class="l-container l-flexbox l-flexbox_column">
            <header class="l-welcome-header l-flexbox l-flexbox_column l-flexbox_flexbetween">
                <img class="l-welcome-header-logo" src="img/logo-qmunicate-big.png" alt="Q-municate">
                <img class="l-welcome-header-text" src="img/logo-qmunicate-text.png" alt="Q-municate">
                <div class="download">
                    <a class="download-app" href="https://play.google.com/store/apps/details?id=com.quickblox.q_municate" target="_blank">
                        <img src="img/app-android.png" alt="download Q-municate Android">
                    </a>
                    <a class="download-app" href="https://itunes.apple.com/us/app/q-municate/id909698517?ls=1&mt=8" target="_blank">
                        <img src="img/app-ios.png" alt="download Q-municate iOS">
                    </a>
                </div>
            </header>
            <form class="l-form l-flexbox l-flexbox_column" action="#" autocomplete="off">
                <span class="text text_forgot">
                    Please enter your email address below
                    <br>and we will send you a link to reset your password.
                </span>
                <span class="text text_error">Error</span>
                <input id="forgot-email" class="form-input" type="email" placeholder="Email" required>
                <button id="forgotForm" class="btn btn_form btn_reset btn_qb">Send Verification Email</button>
            </form>
        </div>
    </section>

    <section id="mainPage" class="l-page is-hidden">

        <div class="l-content l-flexbox">

            <aside class="l-sidebar">
                <form id="searchContacts" class="l-search localSearch" action="#">
                    <input class="form-input-search" type="search" placeholder="Search">
                </form>

                <div class="l-list-wrap scrollbar">

                    <section id="requestsList" class="l-list is-hidden">
                        <header class="l-list-header">
                            <h3 class="l-list-header-title">Requests</h3>
                        </header>
                        <ul class="list"></ul>
                    </section>

                    <section id="recentList" class="l-list is-hidden">
                        <header class="l-list-header">
                            <h3 class="l-list-header-title">Recent</h3>
                        </header>
                        <ul class="list list_contextmenu"></ul>
                    </section>

                    <section id="historyList" class="l-list is-hidden">
                        <header class="l-list-header">
                            <h3 class="l-list-header-title">History</h3>
                        </header>
                        <ul class="list list_contextmenu"></ul>
                    </section>

                    <section id="searchList" class="l-list is-hidden">
                        <header class="l-list-header">
                            <h3 class="l-list-header-title">Search results</h3>
                        </header>
                        <ul class="list list_contextmenu"></ul>
                        <div class="note l-flexbox l-flexbox_column">
                            <span class="text text_alert">Sorry...</span>
                            <span class="text">No results found</span>
                        </div>
                        <button class="search btn btn_search">Global Search</button>
                    </section>

                    <section id="emptyList" class="l-list note l-flexbox l-flexbox_column is-hidden">
                        <span class="text text_alert">Oops...</span>
                        <span class="text">You don't have any contacts.</span>
                    </section>
                </div>
            </aside>
            <img class="btn_demo is-hidden" src="<?php echo $this->url->get('public/img/close.png'); ?>" alt="close">
            <div class="l-workspace-wrap">


                <section id="capBox" class="l-workspace l-flexbox">

                </section>
                <div class="popover popover_smile">
                    <div class="smiles-tabs">
                        <button class="smiles-tab smiles-tab_people is-actived" data-group="people"></button>
                        <button class="smiles-tab smiles-tab_nature" data-group="nature"></button>
                        <button class="smiles-tab smiles-tab_objects" data-group="objects"></button>
                        <button class="smiles-tab smiles-tab_places" data-group="places"></button>
                        <button class="smiles-tab smiles-tab_symbols" data-group="symbols"></button>
                    </div>
                    <div class="smiles-wrap">
                        <div class="smiles-group smiles-group_people">
                            😄😃😀😊☺😉😍😘😚😗😙😜😝😛😳😁😔😌😒😞😣 😢😂😭😪😥😰😅😓😩😫😨😱😠😡😤😖😆😋😷😎😴 😵😲😟😦😧😈👿😮😬😐😕😯😶😇😏😑👲👳👮👷💂 👶👦👧👨👩👴👵👱👼👸😺😸😻😽😼🙀😿😹😾👹👺 🙈🙉🙊💀👽💩🔥✨🌟💫💥💢💦💧💤💨👂👀👃👅👄 👍👎👌👊✊✌👋✋👐👆👇👉👈🙌🙏☝👏💪🚶🏃💃 👫👪👬👭💏💑👯🙆🙅💁🙋💆💇💅👰🙎🙍🙇🎩👑👒 👟👞👡👠👢👕👔👚👗🎽👖👘👙💼👜👝👛👓🎀🌂💄 💛💙💜💚❤💔💗💓💕💖💞💘💌💋💍💎👤👥💬👣💭
                        </div>
                        <div class="smiles-group smiles-group_nature is-hidden">
                            🐶🐺🐱🐭🐹🐰🐸🐯🐨🐻🐷🐽🐮🐗🐵🐒🐴🐑🐘🐼🐧 🐦🐤🐥🐣🐔🐍🐢🐛🐝🐜🐞🐌🐙🐚🐠🐟🐬🐳🐋🐄🐏 🐀🐃🐅🐇🐉🐎🐐🐓🐕🐖🐁🐂🐲🐡🐊🐫🐪🐆🐈🐩🐾 💐🌸🌷🍀🌹🌻🌺🍁🍃🍂🌿🌾🍄🌵🌴🌲🌳🌰🌱🌼🌐 🌞🌝🌚🌑🌒🌓🌔🌕🌖🌗🌘🌜🌛🌙🌍🌎🌏🌋🌌🌠⭐ ☀⛅☁⚡☔❄⛄🌀🌁🌈🌊
                        </div>
                        <div class="smiles-group smiles-group_objects is-hidden">
                            🎍💝🎎🎒🎓🎏🎆🎇🎐🎑🎃👻🎅🎄🎁🎋🎉🎊🎈🎌🔮 🎥📷📹📼💿📀💽💾💻📱☎📞📟📠📡📺📻🔊🔉🔈🔇 🔔🔕📢📣⏳⌛⏰⌚🔓🔒🔏🔐🔑🔎💡🔦🔆🔅🔌🔋🔍 🛁🛀🚿🚽🔧🔩🔨🚪🚬💣🔫🔪💊💉💰💴💵💷💶💳💸 📲📧📥📤✉📩📨📯📫📪📬📭📮📦📝📄📃📑📊📈📉 📜📋📅📆📇📁📂✂📌📎✒✏📏📐📕📗📘📙📓📔📒 📚📖🔖📛🔬🔭📰🎨🎬🎤🎧🎼🎵🎶🎹🎻🎺🎷🎸👾🎮 🃏🎴🀄🎲🎯🏈🏀⚽⚾🎾🎱🏉🎳⛳🚵🚴🏁🏇🏆🎿🏂 🏊🏄🎣☕🍵🍶🍼🍺🍻🍸🍹🍷🍴🍕🍔🍟🍗🍖🍝🍛🍤 🍱🍣🍥🍙🍘🍚🍜🍲🍢🍡🍳🍞🍩🍮🍦🍨🍧🎂🍰🍪🍫 🍬🍭🍯🍎🍏🍊🍋🍒🍇🍉🍓🍑🍈🍌🍐🍍🍠🍆🍅🌽
                        </div>
                        <div class="smiles-group smiles-group_places is-hidden">
                            🏠🏡🏫🏢🏣🏥🏦🏪🏩🏨💒⛪🏬🏤🌇🌆🏯🏰⛺🏭🗼 🗾🗻🌄🌅🌃🗽🌉🎠🎡⛲🎢🚢⛵🚤🚣⚓🚀✈💺🚁🚂 🚊🚉🚞🚆🚄🚅🚈🚇🚝🚋🚃🚎🚌🚍🚙🚘🚗🚕🚖🚛🚚 🚨🚓🚔🚒🚑🚐🚲🚡🚟🚠🚜💈🚏🎫🚦🚥⚠🚧🔰⛽🏮 🎰♨🗿🎪🎭📍🚩🇯🇵🇰🇷🇩🇪🇨🇳🇺🇸🇫🇷🇪🇸🇮🇹🇷🇺🇬🇧
                        </div>
                        <div class="smiles-group smiles-group_symbols is-hidden">
                            1⃣2⃣3⃣4⃣5⃣6⃣7⃣8⃣9⃣0⃣🔟🔢#⃣🔣⬆⬇⬅➡🔠🔡🔤 ↗↖↘↙↔↕🔄◀▶🔼🔽↩↪ℹ⏪⏩⏫⏬⤵⤴🆗 🔀🔁🔂🆕🆙🆒🆓🆖📶🎦🈁🈯🈳🈵🈴🈲🉐🈹🈺🈶🈚 🚻🚹🚺🚼🚾🚰🚮🅿♿🚭🈷🈸🈂Ⓜ🛂🛄🛅🛃🉑㊙㊗ 🆑🆘🆔🚫🔞📵🚯🚱🚳🚷🚸⛔✳❇❎✅✴💟🆚📳📴 🅰🅱🆎🅾💠➿♻♈♉♊♋♌♍♎♏♐♑♒♓⛎🔯 🏧💹💲💱©®™❌‼⁉❗❓❕❔⭕🔝🔚🔙🔛🔜🔃 🕛🕧🕐🕜🕑🕝🕒🕞🕓🕟🕔🕠🕕🕖🕗🕘🕙🕚🕡🕢🕣 🕤🕥🕦✖➕➖➗♠♥♣♦💮💯✔☑🔘🔗➰〰〽🔱 ◼️◻️◾️◽️▪️▫️🔺🔲🔳⚫️⚪️🔴🔵🔻⬜️⬛️🔶🔷🔸🔹
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </section>

    <div class="popups l-flexbox">
        <section id="popupAttach" class="popup popup_attach">
            <img class="attach-photo" src="" alt="attach">
            <video class="video-js vjs-default-skin vjs-big-play-centered attach-video" controls autoplay preload="auto" data-setup="{}"></video>
            <div class="attach-description l-flexbox l-flexbox_flexbetween">
                <span class="attach-name"></span>
                <a class="attach-download" href="" download>Download</a>
            </div>
        </section>

        <section id="popupLogout" class="popup popup_logout is-open">
            <div class="popup-alert l-flexbox_inline l-flexbox_flexcenter">
                <span class="alert alert_logout">Are you sure
                    <br>you want to log out?</span>
            </div>
            <div class="popup-controls">
                <a class="popup-control-button popup-control-button_cancel" href="#">Cancel</a>
                <a id="logoutConfirm" class="popup-control-button popup-control-button_ok" href="#">Ok</a>
            </div>
        </section>

        <section id="popupImport" class="popup popup_import is-open">
            <div class="popup-alert l-flexbox_inline l-flexbox_flexcenter">
                <span class="alert alert_import">Your Facebook friends who have
                    <br>a Q-municate account were successfully
                    <br>added to your contacts</span>
            </div>
            <div class="popup-controls">
                <a class="popup-control-button popup-control-button_ok" href="#">Got it</a>
            </div>
        </section>

        <section id="popupDelete" class="popup popup_delete is-open">
            <div class="popup-alert l-flexbox_inline l-flexbox_flexcenter">
                <span class="alert alert_delete">Delete contact?</span>
            </div>
            <div class="popup-controls">
                <a class="popup-control-button popup-control-button_cancel" href="#">Cancel</a>
                <a id="deleteConfirm" class="popup-control-button popup-control-button_ok" href="#">Ok</a>
            </div>
        </section>

        <section id="popupLeave" class="popup popup_leave is-open">
            <div class="popup-alert l-flexbox_inline l-flexbox_flexcenter">
                <span class="alert alert_logout">Are you sure
                    <br>you want to leave the group chat?</span>
            </div>
            <div class="popup-controls">
                <a class="popup-control-button popup-control-button_cancel" href="#">Cancel</a>
                <a id="leaveConfirm" class="popup-control-button popup-control-button_ok" href="#">Ok</a>
            </div>
        </section>

        <section id="popupSearch" class="popup popup_search">
            <header class="popup-header">
                <h3>Global Search</h3>
            </header>
            <form id="globalSearch" class="popup-form" action="#">
                <input class="form-input-search" type="search" placeholder="Search" autofocus>
            </form>
            <ul class="popup-elem list list_contacts"></ul>
            <div class="popup-elem note l-flexbox l-flexbox_column">
                <span class="text text_alert">Sorry...</span>
                <span class="text">No results found</span>
            </div>
        </section>

        <section id="popupContacts" class="popup popup_contacts not-selected">
            <header class="popup-header">
                <h3>Contacts</h3>
            </header>
            <form id="searchFriends" class="popup-form localSearch" action="#">
                <input class="form-input-search" type="search" placeholder="Search">
            </form>
            <div class="popup-content">
                <ul class="list list_contacts scrollbarContacts"></ul>
                <div class="note l-flexbox l-flexbox_column">
                    <span class="text text_alert">Sorry...</span>
                    <span class="text">No results found</span>
                </div>
            </div>
            <div class="popup-nofriends l-flexbox is-hidden">
                <div class="l-cap l-cap_contacts l-flexbox l-flexbox_column">
                    <span class="cap-text cap-text_contacts">It's a little lonely
                        <br>over here</span>
                    <button class="search btn btn_invite btn_invite_contacts">
                        <img class="btn-icon btn-icon_invite btn-icon_invite_contacts" src="img/icon-invite.png" alt="invite">Search Friends
                    </button>
                </div>
            </div>
            <footer class="popup-footer">
                <button class="btn btn_popup btn_popup_private">Create a chat</button>
                <button class="btn btn_popup btn_popup_group">Create group chat</button>
                <button class="btn btn_popup btn_popup_add">Add to chat</button>
            </footer>
        </section>
    </div>

    <audio id="new_message">
        <source src="audio/new.ogg"></source>
        <source src="audio/new.mp3"></source>
    </audio>
<!-- End Content -->


